<template>
  <section class="top">
    <div class="top-left"></div>
    <div class="top-center">
      <span v-for="(msg, idx) in [currentMessage]" :key="idx + '-' + currentMessage" class="top-scroll-text">
        {{ msg }}
        <template v-if="currentMessage === 'Subscribe for up to 30% off.'">
          <a href="#" class="top-link"> Join Now</a>
        </template>
      </span>
    </div>
    <!-- <div class="top-right">
      <span class="crown-icon" style="margin-right:4px;vertical-align:middle;">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"
          width="16" height="16" viewBox="0 0 16 16">
          <defs>
            <clipPath id="master_svg0_284_3830">
              <rect x="0" y="1" width="16" height="13.88679313659668" rx="0"></rect>
            </clipPath>
          </defs>
          <g>
            <g clip-path="url(#master_svg0_284_3830)">
              <g>
                <path
                  d="M7.97875,1C8.70613,1,9.29587,1.589594,9.29587,2.31726C9.29587,2.76799,9.06942,3.16475,8.72533,3.40202L11.0507,7.64503L11.0587,7.64662L11.0323,7.60138C11.8685,7.09035,12.7039,6.57932,13.5385,6.06669C13.4271,5.87422,13.3683,5.6562,13.3681,5.43425C13.3681,5.41759,13.3721,5.40251,13.3729,5.38664C13.3729,5.3787,13.3705,5.37077,13.3705,5.36363C13.3705,4.63596,13.9602,4.04637,14.6876,4.04637C15.4142,4.04637,16.0039,4.63596,16.0039,5.36363C16.0039,5.94846,15.6198,6.43886,15.0933,6.61106C15.0549,6.62693,15.0149,6.63645,14.9749,6.64756L14.9477,6.65549C14.9172,6.66343,14.8876,6.67454,14.8564,6.68009L13.2848,12.0793C13.2652,12.1506,13.2381,12.2198,13.204,12.2856L13.2032,14.8868L2.80068,14.8868L2.80068,12.2705C2.77032,12.2094,2.74568,12.1457,2.72707,12.0801L1.13468,6.61423C0.482412,6.52237,-0.00175381,5.96775,0,5.31443C0,4.58676,0.589744,3.99717,1.31632,3.99717C1.80077,4.00199,2.2442,4.26784,2.47362,4.69099C2.70304,5.11415,2.68211,5.62758,2.41899,6.03099C2.60144,6.14208,4.87959,7.5387,4.98602,7.60218L7.27378,3.42662C6.89257,3.18441,6.66212,2.76623,6.66243,2.31726C6.66243,1.589594,7.25137,1,7.97875,1ZM12.403,12.6125L3.60088,12.6125L3.60088,14.0933L12.403,14.0933L12.403,12.6125ZM8.10038,3.95352C8.03682,3.95962,7.97286,3.96069,7.90913,3.9567Q6.19111,7.06258,5.61177,8.10766C5.54536,8.2416,5.42508,8.34157,5.28049,8.383009999999999C5.23886,8.39482,5.19575,8.4007,5.15246,8.40047C5.04318,8.39706,4.93682,8.36473,4.84438,8.30683Q4.68114,8.21082,4.17062,7.90055L2.15253,6.67692C2.11332,6.69755,2.07331,6.71501,2.0325,6.73168L3.49685,11.7127L12.5159,11.715L13.9242,6.92054L13.9554,6.81579C13.892,6.79309,13.8307,6.76494,13.7722,6.73168L11.2371,8.26954C11.1379,8.32985,11.0051,8.40047,10.8555,8.40047C10.8163,8.399930000000001,10.7773,8.3946,10.7394,8.384599999999999C10.545,8.33223,10.4353,8.17035,10.3617,8.03545L8.10038,3.95352ZM14.702,4.8049800000000005C14.3948,4.806290000000001,14.1469,5.05428,14.1483,5.35887C14.1483,5.66438,14.3963,5.91275,14.7012,5.91275C15.0083,5.91144,15.2563,5.66345,15.2549,5.35887C15.2563,5.05428,15.0083,4.806290000000001,14.7012,4.8049800000000005L14.702,4.8049800000000005ZM1.33713,4.72166C1.02998,4.72297,0.782063,4.97096,0.783391,5.27555C0.783391,5.58185,1.03145,5.82943,1.33713,5.82943C1.64396,5.82768,1.89139,5.57982,1.89006,5.27555C1.89139,4.97126,1.64396,4.723409999999999,1.33713,4.72166ZM8.00195,1.742745C7.69481,1.744057,7.44689,1.992041,7.44822,2.29663C7.44822,2.60214,7.69628,2.85051,8.00195,2.85051C8.30879,2.84877,8.55622,2.60091,8.55489,2.29663C8.55622,1.99235,8.30879,1.7444929999999998,8.00195,1.742745Z"
                  fill="#fff" fill-opacity="1"></path>
              </g>
            </g>
          </g>
        </svg>
      </span>
      <a href="#" class="top-link">GOELIA Rewards</a> 
    </div>-->
  </section>
</template>

<script lang="ts">
import { ref, onMounted, onUnmounted, defineComponent, getCurrentInstance } from 'vue';
import { useCurrencyStore } from '@/store'

export default defineComponent({
  name: 'TopBar',
  setup() {
    const useCurrency = useCurrencyStore();
    // 获取组件实例
    const instance = getCurrentInstance();
    // 获取全局属性和转换价格方法
    const globalProperties = instance ? (instance as any).proxy : null;

    // 顶部滚动消息
    const messages = [
      'Members can enjoy a maximum discount of 50%.',
      'Members can enjoy a maximum discount of 50%. Join now',
      `"Invite new users to register as members and both parties can get a ${useCurrency.currentCurrency.unit} ${globalProperties?.$ConvertPrice(10)} discount coupon."`
    ]
    const currentIndex = ref(0)
    const currentMessage = ref(messages[0])
    let scrollTimer: any = null

    onMounted(() => {
      scrollTimer = setInterval(() => {
        currentIndex.value = (currentIndex.value + 1) % messages.length
        currentMessage.value = messages[currentIndex.value]
      }, 3000)
    })

    onUnmounted(() => {
      if (scrollTimer) clearInterval(scrollTimer)
    })

    return {
      currentMessage
    }
  }
})
</script>

<style lang="scss" scoped>
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #222;
  color: #fff;
  height: 36px;
  padding: 0 40px;
  font-size: 13px;
  position: relative;

  .top-left {
    flex: 0 0 180px;
    min-width: 120px;
  }

  .top-center {
    flex: 1;
    text-align: center;
    overflow: hidden;
    position: relative;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .top-right {
    flex: 0 0 220px;
    min-width: 160px;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .top-link {
    color: #fff;
    text-decoration: underline;
    font-size: 13px;
    margin-left: 2px;
  }

  .crown-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 2px;
    position: relative;
    bottom: -4px;
  }

  .top-scroll-text {
    display: inline-block;
    transition: transform 0.5s cubic-bezier(.4, 0, .2, 1), opacity 0.5s;
    will-change: transform, opacity;
    white-space: nowrap;
    transform: translateX(0);
  }

  .scroll-fade-enter-active,
  .scroll-fade-leave-active {
    transition: all 1s;
  }

  .scroll-fade-enter-from {
    opacity: 0;
    transform: translateY(100%);
  }

  .scroll-fade-enter-to {
    opacity: 1;
    transform: translateY(0);
  }

  .scroll-fade-leave-from {
    opacity: 1;
    transform: translateY(0);
  }

  .scroll-fade-leave-to {
    opacity: 0;
    transform: translateY(-100%);
  }
}
</style>